{[ template "__start__.html" . ]}
<body>
<div id="app">
    {[ template "__header__.html" . ]}
    <div class="container-fluid">
        <div class="row">
            {[ template "__menu__.html" . ]}
            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
                <div style="margin-top: 16px; ">

                    <div class="box" style="border: 1px solid #D3D3D3;margin-bottom: 16px;">
                        <table class="table table-hover">
                            <thead style="z-index: 99;">
                            <tr>
                                <th scope="col">时间</th>
                                <th scope="col">UUID</th>
                                <th scope="col">是否同意</th>
                            </tr>
                            </thead>
                            <tbody>
                            <template v-for="item in list">
                                <tr style="font-size: 11px;">
                                    <td>{{ item.created_at }}</td>
                                    <td><h4>{{ item.uuid }}</h4></td>
                                    <td>
                                        <template v-if="item.agree === 1">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" @click="del(item.uuid)"  style="width: 56px;height: 24px;" type="checkbox" role="switch" id="flexSwitchCheckDefault" checked>
                                            </div>
                                        </template>
                                        <template v-else>
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" @click="set(item.uuid)" style="width: 56px;height: 24px;" type="checkbox" role="switch" id="flexSwitchCheckDefault">
                                            </div>
                                        </template>
                                    </td>
                                </tr>
                            </template>
                            </tbody>
                        </table>
                    </div>
                    <div class="row">
                        <div class="col align-self-start"></div>
                        <div class="btn-group col align-self-center" style="width: 30%;" role="group" aria-label="First group">
                            <a type="button" class="btn btn-primary" @click="goto(1)">首页</a>
                            <template v-for="item in page_list">
                                <a v-if="item.action === 1" type="button" class="btn btn-secondary" @click="goto(item.pg)">{{ item.pg }}</a>
                                <a v-else type="button" class="btn btn-primary" @click="goto(item.pg)">{{ item.pg }}</a>
                            </template>
                        </div>
                        <div class="col align-self-end"></div>
                    </div>
                </div>

                {[ template "__toast__.html" . ]}
            </main>
        </div>
    </div>
</div>
</body>
{[ template "__js__.html" . ]}
<script>
    const { createApp, ref } = Vue;
    const common = new Utils;
    const app = createApp({
        data() {
            return {
                list: [],
                page: 1,
                limit: 10,
                total: 0,
                user_game_list:[],
                page_list: [],
                query_user_id: "",
                query_nick_name: "",
            }
        },
        created:function(){
            let t = this;
            t.getList();
        },
        destroyed:function () {
        },
        methods: {
            getList: function () {
                let t = this;
                let apiUrl = "/ios/list?page="+t.page+"&limit="+t.limit;
                common.AjaxGet(apiUrl, function (resp) {
                    console.log(resp);
                    t.list = resp.data.list;
                });
                t.pageList();
            },

            goto: function (pg) {
                let t = this;
                t.page = pg;
                t.getList();
            },

            pageList: function () {
                let t = this;
                t.page_list = [];
                if(t.page<4) {
                    for (let i=1; i<6; i++) {
                        let data = {pg : i, action: 0}
                        if (t.page === i) {
                            data.action = 1;
                        }
                        t.page_list.push(data);
                    }
                }
                if(t.page>=4) {
                    for (let i=t.page-3; i<t.page+3; i++) {
                        let data = {pg : i, action: 0}
                        if (t.page === i) {
                            data.action = 1;
                        }
                        t.page_list.push(data);
                    }
                }
            },

            set: function (uuid) {
                let t = this;
                common.AjaxGetNotAsync("/ios/agree?uuid="+uuid+"&agree=1", function (resp){
                    if (resp.msg === "ok") {
                        common.ToastShow("成功!");
                        t.getList();
                    } else {
                        common.ToastShow("失败!");
                    }
                });
            },

            del: function (uuid) {
                let t = this;
                common.AjaxGetNotAsync("/ios/agree?uuid="+uuid+"&agree=0", function (resp){
                    if (resp.msg === "ok") {
                        common.ToastShow("成功!");
                        t.getList();
                    } else {
                        common.ToastShow("失败!");
                    }
                });
            },

        },
        computed: {
        },
        mounted:function(){
        },
    });
    app.mount('#app');
</script>
{[ template "__end__.html" . ]}